<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Boss直聘-互联网招聘神器!</title>
    <link rel="shortcut icon" type="image/x-icon" href="https://static.zhipin.com/zhipin/v171/h5/wap/images/favicon.png">
    <!-- 引用的外部样式表：在上面的头部最后一行里写上link 在后面的双引号里写上css/style 点 tap -->
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="containter">
        <!-- class 类 -->
        <!-- alt shift f 调整整体代码格式 -->
        <!-- 在H1 P 标签里加上类 直接打就行 class=啥啥 id等于啥啥,id选择器是用#号表示 -->
        <!-- 头部-  div  img  img/  -->
        <div class="home-header">
            <img src="img/home-search-text.png" alt="">
            <!-- 创建一个表单 form 把form的action删了 在两个form中间写 input。 button 打搜索 text是框 radio是单选 -->
            <form>
                <input type="text" placeholder="搜索职位/公司">
                <button>搜索</button>
            </form>
            <!-- <form>
                <input type="radio">
                <button>搜索</button>
            </form> -->

        </div>
        <!-- 分类 -->
        <!-- div 在div里打dl(无序列表)，在dl里加dt和dd dt里加img图片和div技术文字块 dd里加上分类项目a标签*8 -->
        <div class="home-categories">
            <dl>
                <dt>
                    <img src="img/technology.png" alt="">
                    <div>技术</div>
                </dt>
                <dd>
                    <!-- 加样式 在a标签后面加class tag -->
                    <a href="" class="tag">java</a>
                    <a href="" class="tag">PHP</a>
                    <a href="" class="tag">Web前端</a>
                    <a href="" class="tag">数据挖掘</a>
                    <a href="" class="tag">C++</a>
                    <a href="" class="tag">Python</a>
                    <a href="" class="tag">Ruby</a>
                    <a href="" class="tag">NodeJs</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="img/product.png" alt="">
                    <div>产品</div>
                </dt>
                <dd>
                    <!-- 加样式 在a标签后面加class tag -->
                    <a href="" class="tag">产品经理</a>
                    <a href="" class="tag">产品助理</a>
                    <a href="" class="tag">网页产品经理</a>
                    <a href="" class="tag">数据产品经理</a>
                </dd>
            </dl><dl>
                <dt>
                    <img src="img/designer.png" alt="">
                    <div>设计</div>
                </dt>
                <dd>
                    <!-- 加样式 在a标签后面加class tag -->
                    <a href="" class="tag">UI设计</a>
                    <a href="" class="tag">平面设计</a>
                    <a href="" class="tag">交互设计</a>
                    <a href="" class="tag">设计总监</a>
                </dd>
            </dl><dl>
                <dt>
                    <img src="img/market.png" alt="">
                    <div>市场</div>
                </dt>
                <dd>
                    <!-- 加样式 在a标签后面加class tag -->
                    <a href="" class="tag">市场营销</a>
                    <a href="" class="tag">商务渠道</a>
                    <a href="" class="tag">品牌公关</a>
                    <a href="" class="tag">市场总监</a>
                    <a href="" class="tag">策划经理</a>
                    <a href="" class="tag">活动策划</a>
                    <a href="" class="tag">SEO</a>
                    <a href="" class="tag">SEM</a>
                </dd>
            </dl>
        </div>

        <!-- 底部 -->
        <!-- 两行就是P*2 -->
        <div class="home-footer">
            <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
            <p>企业服务热线和举报投诉：400 065 5799</p>
        </div>

    </div>

</body>

</html>